<template>
  <div class="x-data-pages-list">
    <x-data-table
      ref="tableElRef"
      v-model:immediate="immediate"
      :params="dataTableParams"
      :columns="tableColumns"
      :row-key="(row) => row.id"
      :toolbar="false"
    />
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, h, reactive, toRefs, VNode, watch } from 'vue'
  import { XDataTable } from '@/components'
  import { NDivider, NEllipsis, NSpace, NTag, NText } from 'naive-ui'

  export default defineComponent({
    name: 'XDataPagesList',
    components: {
      XDataTable
    },
    props: {
      // ids串
      ids: {
        type: Array,
        default: () => null
      },
      // list数据
      list: {
        type: Array,
        default: () => null
      },
      // api地址
      api: {
        type: String,
        default: 'advertising/getPagesList'
      },
      // 接口请求额外参数
      formData: {
        type: Object,
        default: () => {}
      },
      // 需要展示的列
      columns: {
        type: Array,
        default: () => [
          'title',
          'productNum',
          'pagePv',
          'productPv',
          'createdAt',
          'updateAt',
          'creatorName',
          'updateName'
        ]
      },
      // 前缀列
      prefix: {
        type: Array,
        default: () => []
      },
      // 后缀列
      suffix: {
        type: Array,
        default: () => []
      }
    },
    setup($props) {
      const $state: any = reactive({
        ...toRefs($props),
        immediate: true,
        dataTableParams: computed(() => {
          const actions = $props.api
          const params = {
            type: 2
          }
          if ($state.ids) {
            Object.assign(params, {
              pageIdList: $state.ids
            })
          }
          Object.assign(params, $state.formData || {})
          return {
            actions,
            data: params
          }
        }),
        tableColumns: computed(() => {
          const defaultColumns = [
            {
              title: '页面名称',
              key: 'title',
              render(row: { id: number; title: string; pageStatus: number; pageAggregation: number }): VNode {
                return h(
                  NSpace,
                  {
                    vertical: true,
                    size: 1
                  },
                  () => [
                    h(
                      NEllipsis,
                      {
                        style: 'max-width: 300px;'
                      },
                      () => row.title
                    ),
                    h(NSpace, {}, () => [
                      h(NText, {}, () => `页面ID：${row.id}`),
                      row.pageStatus || row.pageAggregation
                        ? h(
                            NTag,
                            {
                              type: row.pageStatus ? 'info' : 'success'
                            },
                            () => (row.pageStatus ? '店铺主页' : '默认推广聚合页')
                          )
                        : null
                    ])
                  ]
                )
              }
            },
            {
              title: '商品数',
              align: 'center',
              key: 'productNum'
            },
            {
              title: '访客数/浏览量',
              align: 'center',
              key: 'pagePv',
              render(row: { pageUv: number; pagePv: number }): VNode {
                return h(NSpace, { size: 2, justify: 'center' }, () => [
                  h(NText, {}, () => `${row.pageUv}`),
                  h(NDivider, { vertical: true }),
                  h(NText, {}, () => `${row.pagePv}`)
                ])
              }
            },
            {
              title: '商品访客数/商品浏览量',
              align: 'center',
              key: 'productPv',
              render(row: { productUv: number; productPv: number }): VNode {
                return h(NSpace, { size: 2, justify: 'center' }, () => [
                  h(NText, {}, () => `${row.productUv}`),
                  h(NDivider, { vertical: true }),
                  h(NText, {}, () => `${row.productPv}`)
                ])
              }
            },
            {
              title: '创建时间',
              align: 'center',
              key: 'createdAt'
            },
            {
              title: '最后修改时间',
              align: 'center',
              key: 'updateAt'
            },
            {
              title: '创建账号',
              align: 'center',
              key: 'creatorName',
              render(row: { creatorName: string; creatorPhone: string }): VNode {
                return h(NSpace, { size: 1, vertical: true }, () => [
                  h(NText, {}, () => `${row.creatorName}`),
                  h(NText, {}, () => `${row.creatorPhone}`)
                ])
              }
            },
            {
              title: '最后修改账号',
              align: 'center',
              key: 'updateName',
              render(row: { updateName: string; updatePhone: string }): VNode {
                return h(NSpace, { size: 1, vertical: true }, () => [
                  h(NText, {}, () => `${row.updateName}`),
                  h(NText, {}, () => `${row.updatePhone}`)
                ])
              }
            }
          ]
          const columns = []
          $props.columns.forEach((name: string) => {
            const find = defaultColumns.find((item) => item.key === name)
            if (find) {
              columns.push(find)
            }
          })
          if ($props.prefix?.length) {
            const prefix = $props.prefix || []
            columns.unshift(...prefix)
          }
          if ($props.suffix?.length) {
            const suffix = $props.suffix || []
            columns.push(...suffix)
          }
          return columns
        })
      })

      // watch
      watch(
        () => $state.ids,
        () => {
          $state.immediate = true
        },
        {
          deep: true
        }
      )

      return {
        ...toRefs($state)
      }
    }
  })
</script>

<style></style>
